<!doctype html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>css_core</title>

   <style>
      body{margin-left: 1rem;}
      /*1.兄弟选择器*/
      /*(1)相邻兄弟选择器*/
      /*b + p {color: red}*/
      /*(2)通用选择器*/
      /*#d1~.d2{color: red}*/
      .ul_brother {
         list-style: none;
      }

      .ul_brother li {
         float: left;
      }
      .ul_brother::after{
         content: '';
         display: block;
         clear: both;
      }
      .ul_brother li~li {
         margin-left: 20px;
      }

      /*2.属性选择器*/
      /*[class] {color: red}*/
      /*[class="d2"] {color: red}*/
      /*[title] {color: red}*/
      /*[title="ganjuezijimengmengda"] {color: red}*/
      /*div[class="d2"]{color:red}*/
      /*div[class][id]{color: red}*/
      /*[class][id]{color: red}*/

      /*3.模糊属性值*/
      /*以value值开头的元素*/
      /*[title^="ganj"]{color: red}*/
      /*以value值结尾的元素*/
      /*[title$="gda"]{color: red; text-decoration: line-through}*/
      /*有value值的元素*/
      /*[title*="ji"]{color: red; text-decoration: line-through}*/
      /*有独立value值的元素*/
      [title~="ji"] {
         color: red;
         text-decoration: line-through
      }

      /*3.伪类选择器*/
      /*(1)目标伪类*/
      #div1,
      #div2,
      #div3 {
         display: none;
      }

      #div1:target,
      #div2:target,
      #div3:target {
         display: block;
         color: red;
         background: yellow;
      }

      img {
         display: none
      }

      img:target {
         display: block;
      }

      /*(2)结构伪类*/
      p:first-child {
         color: red
      }

      p:last-child {
         color: blue
      }

      p:nth-child(2) {
         background: yellow
      }

      .table_selector {
         border: 1px solid #0AA1ED;
         width: 400px;
         height: 400px;
      }

      .table_selector td {
         border: 1px solid #0AA1ED;
      }

      .table_selector tr:first-child {
         background: #0ff;
      }

      .table_selector tr:last-child {
         background: #ff0
      }

      /*第3行 第2列 背景色*/
      .table_selector tr:nth-child(3) td:nth-child(2) {
         background: #f0f
      }

      /*empty*/
      div:empty {
         width: 100px;
         height: 100px;
         background: #ff0;
      }

      /*only-child*/
      .div_only span:only-child {
         color: red;
         background: #ff0;
      }

      /*not(only-child)*/
      .div_not span:not(:only-child) {
         color: red;
         background: green;
      }

      /*4.伪元素选择器*/
      .div_wei {
         color: red;
         background: black;
         font: 24px chiller;
      }

      /*首字符*/
      .div_wei::first-letter {
         color: #00ffff;
         font-size: 60px;
      }

      /*首行*/
      .div_wei::first-line {
         color: #ff0;
      }

      /*选中的*/
      .div_wei::selection {
         color: #f0f;
         background: #0ff;
      }

      /*伪元素*/
      .span_wei::after {
         content: "--------小a对小b说的土情话";
         display: block;
         width: 300px;
         height: 100px;
         background: #ff0;
         margin: 20px;

      }

      .span_wei::before {
         content: "深情告白:";
         /*content: url("img/1wan.png");*/
         display: block;
         width: 300px;
         height: 100px;
         background: #00ffff;
      }

      .div_c1 {
         width: 200px;
         height: 200px;
         background: #ff0;
      }

      /*解决外边距溢出*/
      .div_c1:before {
         content: "";
         display: table;
      }

      .div_c2 {
         width: 100px;
         height: 100px;
         background: #00ffff;
         margin-top: 20px;
         /*去掉before 外边距溢出*/
      }

      /*解决高度坍塌*/
      #div_parent {
         border: 3px solid red;
      }

      #sub1,
      #sub2,
      #sub3 {
         width: 100px;
         height: 100px;
         float: left
      }

      #sub1 {
         background: #0ff;
      }

      #sub2 {
         background: #f0f;
      }

      #sub3 {
         background: #ff0;
      }

      #div_parent::after {
         display: block;
         content: "";
         clear: both;
      }
   </style>
</head>

<body>

   <p>1. 相邻兄弟选择器</p>
   <p>格式: selector + selector {}</p>
   <p>1. 通用选择器</p>
   <p>selector ~ selector {}</p>
   <ul class="ul_brother">
      <li><a href="">秒杀</a></li>
      <li><a href="">闪购</a></li>
      <li><a href="">优惠券</a></li>
      <li><a href="">plus会员</a></li>
   </ul>
   <hr>

   <p>2.属性选择器 [ ]</p>
   <p id="d1">大娃</p>
   <p class="d2">二娃</p>
   <span title="ganjuezijimengmengda">三娃</span>
   <b>四娃</b>
   <p>五娃</p>
   <div id="liu" class="d2">六娃</div>
   <h1 title="gan jue zi ji meng meng da">七娃</h1>

   <p>3.伪类选择器 :</p>
   <p>:target{}</p>
   <a href="#div1">div1</a>
   <a href="#div2">div2</a>
   <a href="#div3">div3</a>
   <div id="div1">
      div1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque blanditiis dolor fuga
      fugit modi officia placeat possimus tempora. Doloremque ea facilis numquam optio placeat praesentium
      reprehenderit? A, consectetur!
   </div>
   <div id="div2">
      div2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque blanditiis dolor fuga
      fugit modi officia placeat possimus tempora. Doloremque ea facilis numquam optio placeat praesentium
      reprehenderit? A, consectetur!
   </div>
   <div id="div3">
      div3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque blanditiis dolor fuga
      fugit modi officia placeat possimus tempora. Doloremque ea facilis numquam optio placeat praesentium
      reprehenderit? A, consectetur!
   </div>
   <p>结构伪类</p>
   <table class="table_selector">
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
      </tr>
      <tr>
         <td>5</td>
         <td>6</td>
         <td>7</td>
         <td>8</td>
      </tr>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
      </tr>
      <tr>
         <td>5</td>
         <td>6</td>
         <td>7</td>
         <td>8</td>
      </tr>
   </table>

   <a href="#img1">1万</a>
   <a href="#img2">2万</a>
   <a href="#img3">9万</a> <br>
   <img id="img1" src="img/1wan.png" alt="">
   <img id="img2" src="img/2wan.png" alt="">
   <img id="img3" src="img/9wan.png" alt="">

   <p>empty</p>
   <div>
      <a href="">123</a>
   </div>
   <div>
      <p>123</p>
   </div>
   <div></div>
   <p>only-child</p>
   <div class="div_only">
      <span>22222222222222222</span>
   </div>
   <div class="div_only">
      <span>11111111111111111</span>
      <span>11111111111111111</span>
      <span>11111111111111111</span>
      <span>11111111111111111</span>
      <span>11111111111111111</span>
   </div>
   <p>:not(:条件)</p>
   <div class="div_content">
      <div class="div_not">
         <span>3333333333</span>
      </div>
      <div class="div_not">
         <span>44444444</span>
         <span>44444444</span>
         <span>55555</span>
         <span>66666</span>
      </div>
   </div>
   <p>伪元素选择器</p>
   <div class="div_wei">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores atque cum sint vel voluptates. Adipisci
      doloribus et eum harum ipsum magnam quod quos, voluptate! Cumque fugit in ipsum molestiae nesciunt.
   </div>   
   <p>5.伪元素,内容生成</p>
   <span class="span_wei">我是9,你是3, 除了你还是你</span>

   <hr>
   <p>内容生成可以解决的问题</p>
   <p>1. 解决外边距溢出</p>
   <div class="div_c1">
      <div class="div_c2"> </div>
   </div>
   <p>2. 解决高度坍塌</p>

   <div id="div_parent">
      <div id="sub1"></div>
      <div id="sub2"></div>
      <div id="sub3"></div>
   </div>
   <br><br><br><br><br><br><br><br>

</body>

</html>